<template>
  <!--外形数据表-->

  <div class="table-wrapper w-100">
    <div class="title rounded shadow-harsh pv-10">
      学习资料表

      <div class="search">
        <el-button size="mini" type="success" @click="addHandler">新增</el-button>
        <el-input
          style="margin-left: 10px"
          v-model="search"
          size="mini"
          placeholder="输入细节关键字搜索" />
      </div>

    </div>
    <div class="mt-30">

      <!--    通过字段进行 filter-->
      <el-table
        show-overflow-tooltip
        :v-loading="loading"
        height="450px"
        class="w-100 rounded shadow-harsh p-5"
        :data="tableData.filter(data => !search || data.details.toLowerCase().includes(search.toLowerCase())).slice((currentPage-1)*10,currentPage*10)">

        <el-table-column
          type="index"
          width="50">
        </el-table-column>

<!--        <el-table-column-->
<!--          label="原始名称"-->
<!--          prop="originalFileName"-->
<!--          align="center">-->
<!--        </el-table-column>-->

        <el-table-column
          label="文档名称"
          prop="localFileName"
          align="center">
        </el-table-column>

        <el-table-column
          label="下载地址"
          prop="downloadUrl"
          align="center">
          <template scope="scope">
            <el-link type="primary" target="_blank" :href="scope.row.downloadUrl">下载链接</el-link>
<!--            <a target="_blank" style="color: #4f7ff9">{{scope.row.downloadUrl}}</a>-->
            <!--            <el-tag size="medium">{{// scope.row.downloadUrl}}</el-tag>-->
          </template>
        </el-table-column>

        <el-table-column
          label="备注信息"
          prop="details"
          width="300px"
          align="center">
        </el-table-column>

<!--        <el-table-column-->
<!--          align="center"-->
<!--          label="更新时间"-->
<!--          width="100px"-->
<!--          sortable-->
<!--          prop="updateTime">-->
<!--        </el-table-column>-->

        <el-table-column
          align="center"
          label="插入时间"
          width="100px"
          sortable
          prop="createTime">
        </el-table-column>

        <el-table-column
          align="center">

          <template slot-scope="scope">
            <span v-if="scope.$index !== editIndex">
<!--              <el-button-->
<!--                size="mini"-->
<!--                type="primary">-->
<!--                预览-->
<!--              </el-button>-->

              <el-popconfirm
                @confirm="handleDelete(scope.$index, scope.row)"
                title="您确定要删除数据吗?">
                <el-button
                  slot="reference"
                  size="mini"
                  type="danger">删除
                </el-button>
              </el-popconfirm>

            </span>


          </template>
        </el-table-column>
      </el-table>

      <el-pagination class="pagination"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-size="10"
                     :total="tableData.length"
                     layout="total, prev, pager, next, jumper">
      </el-pagination>



    </div>

    <el-dialog title="新增报告" :visible.sync="dialogFormVisible">
      <!--      <div class="hint">-->
      <!--        *用户名与密码必须包含数字和大小写字母，且用户名4-12位，密码8-16位。-->
      <!--      </div>-->
      <el-form :model="form">
        <el-form-item label="文件备注（细节）" :label-width="formLabelWidth">
          <el-input v-model="form.detail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文件" :label-width="formLabelWidth">
          <el-upload
            :on-success="uploadSuccessHandler"
            :limit="1"
            class="upload-demo pv-30"
            drag
            action="/api/utils/uploadFile">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <div>只能上传excel/csv文件，且不超过128Mb</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button :disabled="!judgeValidity" @click="submitHandler" type="primary">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "learning-doc-table",

  mounted() {

    this.$api.getDocument('learning_materials_doc').then(res => {
      this.tableData = res.data['records'].sort((a, b) => {
        return a.originalFileName - b.originalFileName
      })
      this.loading = false
    })
  },

  computed:{
    judgeValidity: function() {
      return this.form.fileName && this.form.detail && this.form.fileInfo
    }
  },
  methods: {
    getTableIndexByIndex(index) {
      // 通过表的row index来获取表格数据中的row index 在 list 中使用要 -1
      return index + (this.currentPage - 1) * 10 + 1
    },

    addHandler() {
      this.form = {
        detail:null,
        fileName: null,
        fileInfo: null
      }
      this.dialogFormVisible = true
    },

    submitHandler() {
      this.$api.editDocument('learning_materials_doc', 0, 'save', this.form.detail, this.form.fileInfo).then(res => {
        console.log(res)
        if (res['success']) {
          this.tableData.push(res.data['documentInfo'])
          this.dialogFormVisible = false
          this.$message({
            message: '添加成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    },

    handleDelete(index, row) {
      console.log(index, row);
      this.$api.editDocument('learning_materials_doc', row.id, 'remove', '', {}).then(res => {
        console.log(res)
        if (res['success']) {
          let n = this.getTableIndexByIndex(index)
          console.log(n, this.tableData[n-1])
          this.tableData.splice(n-1, 1)

          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
        }
      })
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },

    uploadSuccessHandler(res, file) {
      console.log(res, file)
      this.form.fileInfo = res.data['fileInfo']
      this.form.fileName = file.name

    },

  },

  data() {
    return {
      tableData: [],
      search: "",
      currentPage: 1,
      loading: true,
      editIndex: null,
      form:{
        detail:null,
        fileName: null,
        fileInfo: null
      },
      formLabelWidth: "180px",
      dialogFormVisible: false,
      visible: false
    };
  },
};
</script>

<style scoped>

.avatar-uploader .el-upload {
  border: 1px dashed #616161;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

</style>